<template>
    <pt-form :rules="formRule" ref="formRef" />
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { updateMainFormData, mainFormData } from '../lib'
import { setFormRef } from '../lib/form'

const formRef = ref()
const options = [
    { label: '否', value: 0 },
    { label: '是', value: 1 },
]
const typeOptions = [
    { label: '标准', value: 'default' },
    { label: '卡片', value: 'card' },
    { label: '弹窗', value: 'dialog' },
    { label: '抽屉', value: 'drawer' },
]
const sizeOpt = [
    { label: 'small', value: 'small' },
    { label: 'default', value: 'default' },
    { label: 'large', value: 'large' },
]
const buttonOpt = [
    { label: '开启', value: 1 },
    { label: '关闭', value: 0 },
]
const labelOpt = [
    { label: 'top', value: 'top' },
    { label: 'left', value: 'left' },
    { label: 'right', value: 'right' },
]

const formRule: IFormConfig = {
    buttons: false,
    props: { labelPosition: 'right', labelWidth: '120px' },
    rules: [
        { type: 'divider', label: '基础设置' },
        // { type: 'select', field: 'type', label: '表单类型', value: 'dialog', options: typeOptions },
        { type: 'select', field: 'size', label: '表单尺寸', value: 'default', options: sizeOpt },
        // { type: 'radio', field: 'button', label: '表单按钮', value: 1, options: buttonOpt },
        { type: 'radio', field: 'labelPosition', label: '标签位置', value: 'top', options: labelOpt },
        { type: 'number', field: 'labelWidth', label: '标签尺寸', condition: 'label:left,right', value: 120 },
    ],
}

const init = () => {
    if (Object.keys(mainFormData).length > 0) {
        for (const key in mainFormData) {
            formRef.value.action.setFieldValue(key, mainFormData[key])
        }
        return
    }

    formRule.rules.forEach((item: any) => {
        updateMainFormData(item.field!, item.value)
    })
}

onMounted(() => {
    init()
    formRef.value.action.on('update', (param: { field: string; value: any }) => {
        updateMainFormData(param.field, param.value)
    })
    setFormRef(formRef)
})
</script>

<style scoped lang="scss"></style>
